<template>
  <el-dialog
    :title="config.title || '标题'"
    :visible.sync="visible"
    :width="config.width || '800px'"
    append-to-body
    @close="visible = false"
    v-dialogDrag="config.draggable??false"
  >
    <bForm ref="atFormRef" :model="model" :config="formConfig">
      <template v-for="(_, slot) in $slots" :slot="slot">
        <slot :name="slot"></slot>
      </template>
    </bForm>
    <slot name="bottom"></slot>
    <div
      slot="footer"
      class="dialog-footer"
      v-if="!config.readonly && formButtons.length > 0"
    >
      <el-button
        v-for="btn in formButtons"
        :ref="btn.key"
        :key="btn.key"
        :type="btn.type"
        :icon="btn.icon"
        :size="btn.size"
        @click="onClick(btn)"
        :loading="btn.loading"
        >{{ btn.label }}</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import bForm from "@/components/bForm";
import FileUpload from "@/components/FileUpload";
export default {
  components: {
    FileUpload,
    bForm,
  },
  props: {
    config: {
      type: Object,
      default: () => ({}),
    },
    model: {
      type: Object,
      default: () => ({}),
    },
  },
  watch: {
    config: {
      handler(val) {
        if (this.visible !== val.visible) {
          this.visible = val.visible;
        }
      },
      immediate: true,
      deep: true,
    },
    visible(val) {
      this.$emit("update:visible", val);
    },
  },
  data() {
    return {
      visible: false,
      buttonGroup: {
        submit: {
          label: "保存",
          type: "primary",
          validate: true,
        },
        cancel: {
          label: "取消",
          type: "default",
          onClick: () => {
            this.visible = false;
          },
        },
      },
    };
  },
  computed: {
    formConfig() {
      const { fields } = this.config;
      for (const key in fields) {
        fields[key].row = fields[key].row || 12;
      }
      return {
        readonly: this.config.readonly,
        fields: fields,
      };
    },
    formButtons() {
      let arr = [];
      if (this.config.button === false) {
        return arr;
      }
      if (Object.keys(this.config?.button ?? {}).length > 0) {
        for (const key in this.config.button) {
          let btn = this.buttonGroup[key];
          let obj = this.config.button[key];
          arr.push({ ...btn, ...obj, key });
        }
      } else {
        for (const key in this.buttonGroup) {
          let btn = this.buttonGroup[key];
          arr.push({ ...btn, key });
        }
      }
      return arr;
    },
  },
  mounted() {},
  methods: {
    onClick(btn) {
      if (btn.validate) {
        this.$refs?.atFormRef
          ?.validate()
          .then((data) => {
            if (btn.onClick) {
              btn.onClick(data);
            } else {
              this.$emit("submit", data);
            }
          })
          .catch(() => {});
      } else {
        btn.onClick && btn.onClick();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
:deep(.el-dialog) {
}
</style>
